<template>
  <div>
    <!-- This is manager Welcome page -->

    <!-- breadcrumb nav -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/manager' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>课程管理</el-breadcrumb-item>
        <el-breadcrumb-item>课程安排</el-breadcrumb-item>
    </el-breadcrumb> -->

    <i class="el-icon-s-home" style="font-size: 20px;"></i>
    <span class="icon-title" style="font-size: 18px">&nbsp;首页</span>

    <el-row :gutter="20" class="content-line1">

      <el-col :span="9" :offset="0">
        <!-- 日历表 -->
        <el-card>
          <el-calendar v-model="calendarValue">
          </el-calendar>
        </el-card>
      </el-col>

      <el-col :span="15" :offset="0" class="notice">
        <el-card>
          <div class="title">通知公告</div>
          <el-divider></el-divider>

          <el-collapse v-model="activeNames" accordion>
            <el-collapse-item title="关于5.1劳动节放假通知" name="1">
              <span>集团各部门（中心）、分（子）公司： 2020年五一劳动节即将来临，根据国家相关规定，现将放假事宜安排如下： 一、放假时间安排 2020年5月1日. . .</span>
            </el-collapse-item>
            <el-collapse-item title="关于省领导即将来视察的注意事项通知" name="2">
              <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
              <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
            </el-collapse-item>
            <el-collapse-item title="关于国庆节放假通知" name="3">
              <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
              <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
            </el-collapse-item>
            <el-collapse-item title="关于档馆复工的通知" name="4">
              <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
              <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
            </el-collapse-item>
            <el-collapse-item title="关于5.1劳动节放假通知" name="5">
              <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
              <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
            </el-collapse-item>
          </el-collapse>

        </el-card>
      </el-col>
    </el-row>

    <!-- 第二版内容 -->
    <el-card  class="content-line2">
      <h3 class="todo-title">代办事项</h3>
      <el-row :gutter="20">
        <el-col :span="8" :offset="0" type="flex" justify="center">
          <i class="el-icon-message-solid alarm"></i>
          <div class="left">
            <div class="numbers">219</div>
            <span style="font-size: 14px;">待处理</span>
          </div>
        </el-col>

        <el-col :span="8" :offset="0" type="flex" justify="center">
          <i class="el-icon-message-solid todo"></i>
          <div class="left">
            <div class="numbers">219</div>
            <span style="font-size: 14px;">待审核</span>
          </div>
        </el-col>

        <el-col :span="8" :offset="0" type="flex" justify="center">
          <i class="el-icon-message-solid done"></i>
          <div class="left">
            <div class="numbers">219</div>
            <span style="font-size: 14px;">已处理</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 一个柱状图表 -->

  </div>
</template>

<script>
export default {
  data () {
    return {
      activeNames: '1',
      calendarValue: new Date()
    }
  }
}
</script>

<style lang="less" scoped>
.content-line1 {
  margin-top: 10px;
  height: 442px;

  .el-calendar {
    height: 400px;
    font-size: 12px;
  }

  // 更改日历中的单元格大小
  .el-calendar /deep/ .el-calendar-table .el-calendar-day {
    width: 10px;
    height: 40px;
  }

  .notice {

    .el-card {
      height: 440px;

      .title {
        font-size: 18px;
        font-weight: 500;
        transform: translateY(10px);
      }
    }
  }
}

.content-line2 {
  margin-top: 15px;

  .todo-title {
    margin: 10px;
  }

  .el-row {
    height: 60px;

    .el-col {
      display: flex;
      justify-content: center;

      i {
        font-size: 40px;
      }

      i.alarm {
        color: #f03b3b;
      }

      i.todo {
        color: #FFD344;
      }

      i.done {
        color: #27B148;
      }

      .numbers {
        font-size: 20px;
        font-weight: 500;
      }
    }
  }
}

.el-card.content-line2 /deep/ .el-card__body {
  padding: 0 20px !important;
}

.left {
  margin-left: 10px;
}
</style>
